* {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

@font-face {
  font-family: electronicFont;
  src: url(./assets/font/DS-DIGI.TTF);
}


html,
body,
#root {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  width: 100%;
  background: url(../src/assets/imgs/bg.jpg) no-repeat #000;
  background-position: center;
  background-size: cover;
}

.dataScreen {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform-origin: left top;
  transition: 0.3s;
  overflow: hidden;
}

.grail {
  padding: 0 1% 1%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 90%;

  &_side {
    width: 25%;
    height: 100%;

    display: flex;
    flex-direction: column;
  }

  &_middle {
    margin: 0 1%;
    flex: 1;

    .top {
      height: 15%;
    }

    .chart {
      position: relative;
      height: 85%;

      .map1,
      .map2,
      .map3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 550px;
        height: 550px;
        background: url(../src/assets/imgs/map.png) no-repeat;
        background-size: 100% 100%;
        opacity: 0.3;
      }

      .map2 {
        width: 670px;
        height: 670px;
        background-image: url(../src/assets/imgs/lbx.png);
        opacity: 0.6;
        animation: rotate 15s linear infinite;
        z-index: 2;
      }

      .map3 {
        width: 600px;
        height: 600px;
        background-image: url(../src/assets/imgs/jt.png);
        animation: rotate1 10s linear infinite;
      }
    }
  }
}

// 看板
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04) url(./assets/imgs/line.png);
  padding: 10px;
  height: 30%;
  margin-bottom: 15px;
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}

.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}

.panel .panel_footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}

.panel .panel_footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}

// 看板标题
.panel h2 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
}

// 动画
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}